<template>
  <el-dialog :title="title" :visible.sync="centerDialogVisible" width="30%" center @close="close">
    <div class="qrcodeBox">
      <!-- <canvas id="qrcode" ref="qrcode" v-if="centerDialogVisible"></canvas> -->
      <div id="qrcode" ref="qrcode" v-if="centerDialogVisible"></div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">关 闭</el-button>
      <el-button type="primary" @click="downloadQRcode">下 载</el-button>
    </span>
  </el-dialog>
</template>

<script>
import QRCode from 'qrcodejs2'
import logo from '../../assets/logo/logo.jpg'
export default {
  props: {
    title: { type: String, default: '二维码' },
    QRCodeW: { type: Number, default: 200 },
    QRCodeH: { type: Number, default: 200 },
    logoW: { type: Number, default: 44 },
    logoH: { type: Number, default: 44 },
    logoSrc: { type: String, default: '../../assets/logo/logo.jpg' },
    colorDark: {
      type: String,
      default: '#000000'
    },
    colorLight: {
      type: String,
      default: '#ffffff'
    }
  },
  data() {
    return {
      logoUrl: '../../assets/logo/logo.jpg',
      url: '',
      qrcode: '',
      centerDialogVisible: false
    }
  },
  methods: {
    downloadQRcode() {
      var oQrcode = document.querySelector('#qrcode img')
      var url = oQrcode.src
      var a = document.createElement('a')
      var event = new MouseEvent('click')
      // 下载图名字
      a.download = '活动二维码'
      //url
      a.href = url
      //合成函数，执行下载
      a.dispatchEvent(event)
    },
    setQRcode(url) {
      if (this.qrcode) {
        this.$refs.qrcode.innerHTML = ''
      }
      this.$nextTick(() => {
        let div = document.createElement('qrcode') // 创建一个div,用来生成二维码
        // 生成二维码
        let qrcode = new QRCode(div, {
          text: this.url, // 你的扫码内容,填网址
          width: this.QRCodeW, // 二维码宽度
          height: this.QRCodeH, // 二维码高度
          colorDark: '#333333', //二维码颜色
          colorLight: '#ffffff', //二维码背景色
          correctLevel: QRCode.CorrectLevel.H //从上至下生成码密度越来越高 L - M - Q - H
          // 容错率越高,越复杂
        })
        let logo = new Image()
        logo.crossOrigin = 'Anonymous'
        logo.src = require('@/assets/logo/logo.jpg') // 填入你本地log图片
        // // 生成log图
        logo.onload = () => {
          let container = this.$refs['qrcode']
          // 获取页面上的div,可以使用document.querySelector()等等方法,不类推了
          if (container.innerHTML != '') {
            // 获取页面div , 有则清空已存在的
            container.innerHTML = ''
          }
          let qrImg = qrcode._el.getElementsByTagName('img')[0] // 获取二维码
          let canvas = qrcode._el.getElementsByTagName('canvas')[0] // 获取canvas

          let ctx = canvas.getContext('2d')

          // ctx.drawImage(
          //   logo,
          //   this.QRCodeW * 0.5 - 22,
          //   this.QRCodeH * 0.5 - 22,
          //   this.logoW,
          //   this.logoH
          // ) // 写入logo
          // qrImg.src = canvas.toDataURL()
          qrcode._el.title = ''
          container.appendChild(qrcode._el)
        }
      })
    },
    open(url) {
      this.centerDialogVisible = true
      this.url = url
      if (url) {
        this.$nextTick(() => {
          this.setQRcode(url)
        })
      }
    },
    close() {
      this.centerDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.qrcodeBox {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  #qrcode {
    display: inline-block;
  }
}
</style>
